<template>
  <div class="vue-signature clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card mb15" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16"><a class="ml5" target="_blank" href="https://github.com/WangShayne/vue-signature">https://github.com/WangShayne/vue-signature</a></span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            npm install vue-signature <br>
            <br>
            // main.js <br>
            import vueSignature from "vue-signature" <br>
            Vue.use(vueSignature)
          </code>
        </div>
      </el-card>
      <div class="container">
        <vue-signature ref="signature" :sigOption="option" w="100%" :h="'300px'"></vue-signature>
        <el-button class="mt20" @click="save">保存</el-button>
        <el-button class="mt20" @click="clear">清除</el-button>
        <img class="mt20" :src="queryImg">
      </div>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      option: {
        penColor: 'rgb(0, 0, 0)',
        backgroundColor: 'rgb(0,0,0,0.1)'
      },
      queryImg: ''
    }
  },
  methods: {
    save () {
      var png = this.$refs.signature.save()
      var jpeg = this.$refs.signature.save('image/jpeg')
      var svg = this.$refs.signature.save('image/svg+xml')
      this.queryImg = png
      console.log(png)
      console.log(jpeg)
      console.log(svg)
    },
    clear () {
      this.$refs.signature.clear()
    },
    undo () {
      this.$refs.signature.undo()
    },
    addWaterMark () {
      this.$refs.signature.addWaterMark({
        text: 'mark text', // watermark text, > default ''
        font: '20px Arial', // mark font, > default '20px sans-serif'
        style: 'all', // fillText and strokeText,  'all'/'stroke'/'fill', > default 'fill
        fillStyle: 'red', // fillcolor, > default '#333'
        strokeStyle: 'blue', // strokecolor, > default '#333'
        x: 100, // fill positionX, > default 20
        y: 200, // fill positionY, > default 20
        sx: 100, // stroke positionX, > default 40
        sy: 200 // stroke positionY, > default 40
      })
    },
    fromDataURL (url) {
      // this.$refs.signature.fromDataURL('...')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.vue-signature{
  margin: 0 auto;
  overflow: hidden;
  .main{
    padding: 10px;
  }
}
</style>
